<template>
  <view class="w-[100vw] h-[calc(100vh-98rpx)] bg-teal-500">
    <Home v-if="activeIdx === 0" />
    <Mine v-if="activeIdx === 4" />
    <Scan v-if="activeIdx === 2" />
    <Shop v-if="activeIdx === 1" />
    <Wallet v-if="activeIdx === 3" />
  </view>
  <TabBar />
</template>

<script setup lang="ts">
// 导入tab-bar
import Home from "@/pages/tabBar/home/index.vue";
import Mine from "@/pages/tabBar/mine/index.vue";
import Scan from "@/pages/tabBar/scan/index.vue";
import Shop from "@/pages/tabBar/shop/index.vue";
import Wallet from "@/pages/tabBar/wallet/index.vue";
import { useTabBar } from "@/store/module/tabBar";
import { watch, ref } from "vue";

const tabBar = useTabBar();

const activeIdx = ref<number | null>(null);

watch(
  () => tabBar.current,
  (val) => {
    activeIdx.value = val;
    console.log(val, "---");
  }
);
</script>
